<template>
  <div
    :id="id"
    :class="className"
    :style="{ height, width }"
    style="background: transparent"
  ></div>
</template>

<script setup lang="ts">
import moment from "moment";
import nowSize from "@/utils/fontSize";
import * as echarts from "echarts";
import "echarts/theme/macarons";
import DashboardAPI from "@/api/DashboardAPI";
import { colorList } from "@/utils/colors";
const props = defineProps({
  id: {
    type: String,
    default: "pieChart",
  },
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "200px",
    required: true,
  },
  height: {
    type: String,
    default: "200px",
    required: true,
  },
  year: {
    type: String,
    required: true,
  },
});
const inspLineLength = ref([]);
const inspPositionCount = ref([]);
const year = ref(props.year);
let options = {
  backgroundColor: "",
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    itemWidth: 10,
    itemHeight: 4,
    bottom: "-1%",
    right: "0%",
    textStyle: {
      fontSize: 10,
      color: "rgba(255,255,255,.6)",
    },
  },
  grid: {
    top: "6%",
    right: "2%",
    left: "13%",
    bottom: "20%",
  },

  xAxis: [
    {
      type: "category",
      axisLabel: {
        color: "rgba(255, 255, 255, .6)",
        interval: 0,
        rotate: 35,
        fontSize: 10,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(186, 198, 208, 0.41)",
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
    },
  ],
  yAxis: [
    {
      type: "value",
      min: 0,
      position: "left",
      nameTextStyle: {
        color: "rgba(255,255,255,.6)",
        fontSize: nowSize(12),
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(178, 194, 211, .1)",
          type: "dashed",
        },
      },
      axisLabel: {
        formatter: "{value}km",
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: nowSize(10),
        },
      },
    },
    {
      type: "value",
      name: "",
      min: 0,
      position: "right",
      nameTextStyle: {
        color: "#333",
        fontSize: 11,
      },
      axisLine: {
        lineStyle: {
          color: "#0a3e98",
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#0a3e98",
          type: "dotted",
        },
      },
      axisLabel: {
        formatter: "{value}",
        textStyle: {
          color: "#fff",
          fontSize: nowSize(14),
        },
      },
    },
  ],

  series: [
    {
      name: "巡检公里数",
      type: "bar",
      barWidth: 12, //柱子宽度
      barGap: 0.3,
      itemStyle: {
        color: "#0090ED",
      },
      barBorderRadius: 4,
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      stack: "Total",
      itemStyle: {
        normal: {
          color: (params) => {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 1,
                color: colorList[params.seriesIndex],
              },
            ]);
          },
          barBorderRadius: [30, 30, 30, 30], //圆角大小
        },
      },
    },
    {
      name: "巡检点数",
      type: "bar",
      barWidth: 12, //柱子宽度
      barGap: 0.3,
      itemStyle: {
        color: "#0090ED",
      },
      barBorderRadius: 4,
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      stack: "Total",
      itemStyle: {
        normal: {
          color: (params) => {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 1,
                color: colorList[params.seriesIndex],
              },
            ]);
          },
          barBorderRadius: [30, 30, 30, 30], //圆角大小
        },
      },
    },
  ],
};

const chart = ref<any>("");

// 巡检计划分析
function f_QueryInsp() {
  let params = {
    StartTime: moment(year.value).format("yyyy-01-01"),
    EndTime: moment(year.value).format("yyyy-12-31"),
    Status: 2,
  };
  DashboardAPI.api_year_insp_task_count(params).then(({ data }) => {
    data.forEach((item) => {
      inspLineLength.value.push(Number(item.inspLineLength).toFixed(2));
      inspPositionCount.value.push(item.inspPositionCount);
    });
    options.series[0].data = inspLineLength.value;
    options.series[1].data = inspPositionCount.value;
    chart.value.setOption(options);
  });
}

onMounted(() => {
  chart.value = markRaw(
    echarts.init(
      document.getElementById(props.id) as HTMLDivElement,
      "macarons"
    )
  );

  f_QueryInsp();

  window.addEventListener("resize", () => {
    chart.value.resize();
  });
});

onActivated(() => {
  if (chart.value) {
    chart.value.resize();
  }
});
</script>
